<template>
  <div class="Indicator-wrapper">
    <ul>
      <li class="current">1</li>
      <li class="right">2</li>
      <li class="wrong">3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>24</li>
      <li>25</li>
      <li>26</li>
      <li>27</li>
      <li>28</li>
      <li>29</li>
      <li>30</li>
      <li>31</li>
      <li>32</li>
      <li>33</li>
      <li>34</li>
      <li>35</li>
      <li>36</li>
      <li>37</li>
      <li>38</li>
      <li>39</li>
      <li>40</li>
      <li>41</li>
      <li>42</li>
      <li>43</li>
      <li>44</li>
      <li>45</li>
      <li>46</li>
      <li>47</li>
      <li>48</li>
      <li>49</li>
      <li>50</li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  width: 250px;
}

li {
  background: #666;
  color: #ffff;
  border-radius: 50px;
  font-size: 12px;
  width: 20px;
  text-align: center;
  margin-right: 5px;
  margin-top: 5px;
}

.Indicator-wrapper ul li.current {
  background: rgb(102, 102, 218);
}

.Indicator-wrapper ul li.right {
 background: rgb(90, 247, 90);
}

.Indicator-wrapper ul li.wrong {
  background: rgb(235, 91, 91);
}
</style>